<template>
	<view>
		<!-- 充值金额 -->
		<view class="recharge_box">
			<text class="tit">充值金额 <text style="color: #999999; font-size: 20rpx;margin-left: 20rpx;">最低充值10000起</text> </text>
			<input type="text" placeholder="请输入充值金额" placeholder-style="font-size: 36rpx; color:#999" v-model="total_fee">
			<text class="yue">当前余额：￥{{exchange_detail.uinfo.u_balance}}</text>
		</view>
		
		<!-- 支付方式 -->
		<view class="pay_type">
			<text class="tit">支付方式</text>
			<view class="wechat_pay" @click="pays_wechat" v-if="exchange_detail.wxpayStatus == 1">
				<view class="wechat_payimg">
					<image src="https://wanchuyun-img.oss-cn-beijing.aliyuncs.com/guomai/7a84c367737035a83bcab6809b628cdd09faa6a7.png" mode=""></image>
					<text>微信支付</text>
				</view>
				<view class="radio-content">
				  <view class="radio-content" >
					  <view class="radio" :class="radio_wechat == 1 ? 'radio-default':''" >
						<view :class="radio_wechat == 1 ? 'radio-active':'radio-active-add'"></view>
					  </view>
					</view>
				</view>
			</view>
			
			<view class="offline_pay"  @click="pays_offline" v-if="exchange_detail.offline_pay_status == 1">
				<view class="offline_payimg">
					<image src="https://wanchuyun-img.oss-cn-beijing.aliyuncs.com/guomai/1347c50f9e8a665519a110e54bf3ccb1eaf18ce0.png" mode=""></image>
					<text>线下付款</text>
				</view>
				<view class="radio-content">
				  <view class="radio-content">
					  <view class="radio" :class="radio_offline == 1 ? 'radio-default':''" >
						<view :class="radio_offline == 1 ? 'radio-active':'radio-active-add'"></view>
					  </view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 支付按钮 -->
		<view class="pay_btn">
			<view class="btn" @click="add_rechange()">
				确认充值
			</view>
		</view>
		
		
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				radio_wechat: 1,
				radio_offline: 0,
				exchange_detail: '',
				total_fee: '',
				paymethod: 1
			};
		},
		onLoad() {
			this.getExchange()
		},
		methods:{
			pays_wechat(){
				if( this.radio_wechat == 0 ){
					this.radio_offline = 0
					this.radio_wechat = 1
					this.paymethod = 1
				}
			},
			pays_offline(){
				if( this.radio_offline == 0 ){
					this.radio_offline = 1
					this.radio_wechat = 0
					this.paymethod = 2
				}
			},
			// 获取充值的数据
			getExchange(e) {
				let that = this;
				app.globalRequest({
					api: app.getApi().user.getExchange,
					method: 'post'
				}).then(res => {
					if (res.code == 1) {
						that.exchange_detail = res.data
					}
				}).catch(err => {
				
				})
			},
			// 充值
			add_rechange(){
				let that = this;
				if( this.total_fee == '' ){
					uni.showToast({
						title: '充值金额不可为空',
						icon:'none'
					})
					return
				}
				if( this.total_fee < 0 ){
					uni.showToast({
						title: '充值金额必须大于0',
						icon:'none'
					})
					return
				}
				app.globalRequest({
					api: app.getApi().user.getRechange,
					method: 'post',
					data:{
						paymethod: that.paymethod,
						total_fee: that.total_fee,
						parent_u_sn: getApp().globalData.parent_sn == 'undefined'? '0': getApp().globalData.parent_sn
					}
				}).then(res => {
					if (res.code == 1) {
						console.log(res)
						if( that.paymethod == 1 ){
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: `${res.data.result.timestamp}`,
								nonceStr: res.data.result.nonceStr,
								package: res.data.result.package,
								signType: res.data.result.signType,
								paySign: res.data.result.paySign,
								success: function (res) {
									console.log('res 成功',res);
									// uni.redirectTo({
									// 	url:'/pages/goods-page/pay-success/pay-success'
									// })
									uni.showToast({
										title: '充值成功',
										icon:'none'
									})
									that.total_fee = ''
									that.getExchange()
									setTimeout(()=>{
										uni.navigateBack({
											delta:1
										})
									},900)
								},
								fail: function (err) {

								}
							});
						}
						if( that.paymethod == 2 ){
							uni.showToast({
								title: '线下充值提交成功，请等待审核...',
								icon:'none'
							})
							that.total_fee = ''
							setTimeout(()=>{
								uni.navigateBack({
									delta:1
								})
							},900)
						}
					}
					if( res.code == 0 ){
						uni.showToast({
							title: res.msg,
							icon:'none'
						})
					}
				}).catch(err => {
				
				})
			}
			
			
			
			// mpWxPay(res){
			// 	let that = this;
			
			// },
		}
	}
</script>

<style lang="scss">
	.recharge_box{
		width: 90%;
		margin: 30rpx auto 0;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		padding: 32rpx;
		box-sizing: border-box;
		.tit{
			color: #333333;
			font-size: 28rpx;
		}
		input{
			height: 150rpx;
			// padding: 30rpx 0;
			// box-sizing: border-box;
			text-align: center;
			font-size: 36rpx;
			border-bottom: 2rpx solid #EEEEEE;
			width: 100%;
		}
		
		.yue{
			margin-top: 32rpx;
			font-size: 24rpx;
			color: #666666;
		}
	}
	
	.pay_type{
		width: 90%;
		margin: 30rpx auto 0;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		padding: 32rpx;
		box-sizing: border-box;
		.tit{
			color: #333333;
			font-size: 28rpx;
			padding-bottom: 32rpx;
		}
		.wechat_pay,.offline_pay{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 40rpx 0;
			box-sizing: border-box;
			// margin-top: 32rpx;
			border-top: 2rpx solid #EEEEEE;
			.wechat_payimg,.offline_payimg{
				display: flex;
				align-items: center;
				image{
					width: 45rpx;
					height: 39rpx;
				}
				text{
					font-size: 28rpx;
					color: #333;
					margin-left: 20rpx;
				}
			}
		}
		.offline_pay{
			margin-top: 0;
			padding: 40rpx 0 10rpx;
			.offline_payimg{
				image{
					width: 48rpx;
					height: 48rpx;
				}
			}
			
		}
	}
	.pay_btn{
		width: 90%;
		margin: 60rpx auto 0;
		background: linear-gradient(82deg, #FF7040 0%, #EC1818 100%);
		color: #fff;
		text-align: center;
		font-size: 32rpx;
		height: 84rpx;
		line-height: 84rpx;
	}
	
	.recharge_record{
		width: 100%;
		background-color: #fff;
		padding: 40rpx 32rpx 20rpx;
		box-sizing: border-box;
		margin-top: 40rpx;
		.tits{
			color: #333333;
			font-size: 28rpx;
			padding-bottom: 40rpx;
			box-sizing: border-box;
			display: flex;
		}
		
		.record{
			display: flex;
			flex-direction: column;
			border-top: 2rpx solid #EEEEEE;
			padding: 20rpx 0 ;
			box-sizing: border-box;
			.tit{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;
				text{
					font-size: 28rpx;
					color: #111111;
				}
				.num{
					color: #EC1818;
				}
			}
			.bot{
				display: flex;
				align-items: center;
				justify-content: space-between;
				text{
					font-size: 28rpx;
					color: #999999;
				}
			}
		}
	}
	
	.radio-content {
	  display: flex;
	  align-items: center;
	  .col{
	  	color: #B38E65;
	  }
	}
	.radio {
	  padding: 4rpx;
	  box-sizing: border-box;
	  border-radius: 50%;
	  border: 2rpx solid #CCCCCC;
	  display: flex;
	  flex-direction: column; 
	  align-items: center;
	  justify-content: center;
	  margin: 0rpx 15rpx;
	}
	.radio-active{
	  width: 9px; 
	  height: 9px;
	  border-radius: 50%;
	  background-color: #EC1818;
	}
	
	.radio-active-add{
	  width: 9px; 
	  height: 9px;
	  border-radius: 50%;
	  background-color: #fff;
	}
	
	
	.radio-default{
	  border: 2rpx solid #EC1818;
	}
</style>
